import Cookies from 'js-cookie' // 操作浏览器存储的cookie
// 知识点：浏览器本地存储(缓存)方式，localStorage对象，sessionStorage对象，cookie
// 知识点：本地存储的都是字符串(JSON字符串/数字字符串)
// '0'和'1'在三元表达式里，都会被判定为true使用，只有''是false
// 数字0才是false，除了0的正数/负数都人为善true
// 总结：null undefined 0 ''

// 知识点：+字符串，-> 转成数字(字符串不是数字原地结果NaN)
// !0 -> true   !1 -> false (!取反，数字我还得合计隐式转换的事情，所有!把它转成真正的布尔类型)
// 0代表的意思是隐藏(要给外面用false)，所以现在为true那不行，所以再取一处反
// !!0 -> false -> 隐藏
// !!1 -> true -> 显示

// Cookies.get('sidebarStatus') 如果本地没有存储过侧边栏状态
// 默认走:后面的值，默认显示

const state = {
  sidebar: {
    // '0' -> 隐藏
    // '1' -> 出现
    opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
    withoutAnimation: false // 初始值没啥用，它是控制左侧是否使用动画(下面代码中进行值修改)
  },
  device: 'desktop'
}

const mutations = {
  TOGGLE_SIDEBAR: state => {
    state.sidebar.opened = !state.sidebar.opened
    state.sidebar.withoutAnimation = false
    if (state.sidebar.opened) {
      Cookies.set('sidebarStatus', 1)
    } else {
      Cookies.set('sidebarStatus', 0)
    }
  },
  // 关闭侧边栏导航
  CLOSE_SIDEBAR: (state, withoutAnimation) => {
    Cookies.set('sidebarStatus', 0) // 本地cookie存0(代表现在侧边栏导航关闭)
    state.sidebar.opened = false // 影响state里变量
    state.sidebar.withoutAnimation = withoutAnimation // 不能不使用动画
  },
  TOGGLE_DEVICE: (state, device) => {
    state.device = device
  }
}

const actions = {
  toggleSideBar({ commit }) {
    commit('TOGGLE_SIDEBAR')
  },
  // 关闭侧边栏导航
  // 原来的写法
  // closeSideBar(store, value){
  // 注意：当前actions已经在模块内了，可以直接commit不用加模块名
  //   store.commit('CLOSE_SIDEBAR', value.withoutAnimation)
  // }
  // store对象 {commit：xxx}
  // { commit } = store
  // 知识点：函数形参接收值，就是一个被=赋值的过程
  // 直接解构拿到commit函数
  closeSideBar({ commit }, { withoutAnimation }) {
    commit('CLOSE_SIDEBAR', withoutAnimation)
  },
  toggleDevice({ commit }, device) {
    commit('TOGGLE_DEVICE', device)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}
